import img from '@/assets/credit_bg.png';
import people from '@/assets/credit_poeple.png';
import UseScroolIntoView from '@/components/UseScroolIntoView';
import { jumpUrl } from '@/utils';
import { Button, Card, Divider, Flex } from 'antd';
import { useIntl } from 'umi';
const Credit: React.FC = () => {
  const intl = useIntl();
  UseScroolIntoView();
  const list = [
    {
      title: 'center.credit_easy',
      word: 'center.credit_easy_word',
    },
    {
      title: 'center.credit_useful',
      word: 'center.credit_useful_word',
    },
    {
      title: 'center.credit_influence',
      word: 'center.credit_influence_word',
    },
  ];
  const checkList = [
    {
      title: 'center.credit_report',
      word: 'center.credit_report_word',
      width: '33.33%',
    },
    {
      title: 'center.credit_income',
      word: 'center.credit_income_word',
      width: '33.33%',
    },
    {
      title: 'center.credit_debt',
      word: 'center.credit_debt_word',
      width: '33.33%',
    },
    {
      title: 'center.credit_assest',
      word: 'center.credit_assest_word',
      width: '50%',
    },
    {
      title: 'center.credit_amount',
      word: 'center.credit_amount_word',
      width: '50%',
    },
  ];
  const reportList = [
    {
      title: 'center.credit_mc',
      word: 'center.credit_mc_word',
    },
    {
      title: 'center.credit_te',
      word: 'center.credit_te_word',
    },
  ];
  return (
    <div className="credit">
      <div className="credit_top">
        <div className="common" style={{ color: '#222' }}>
          <div style={{ fontSize: 24, fontWeight: 'bold' }}>
            {intl.formatMessage({ id: 'center.credit' })}
          </div>
          <div style={{ fontSize: 16, marginTop: 10, color: '#333' }}>
            {intl.formatMessage({ id: 'center.credit_word' })}
          </div>
        </div>
      </div>
      {/* 什么是xscore */}
      <div className="credit_score common" id="what" style={{ padding: '110px 0 60px 0' }}>
        <Flex justify="space-between">
          <div>
            <img src={img} width={454} />
          </div>
          <div style={{ marginLeft: 145, flex: 1 }}>
            <div style={{ fontSize: 30, fontWeight: 'bold', color: '#333', marginBottom: 50 }}>
              {intl.formatMessage({ id: 'center.what' })}
            </div>
            <div style={{ fontSize: 20, color: '#333', marginBottom: 20 }}>
              {intl.formatMessage({ id: 'center.x_instrction' })}
            </div>
            <div
              style={{ fontSize: 16, color: '#666666', fontWeight: 'lighter', lineHeight: '26px' }}
            >
              {intl.formatMessage({ id: 'center.x_instrction_word' })}
            </div>
            <Divider />
            <div style={{ fontSize: 20, color: '#333', marginBottom: 20 }}>
              {intl.formatMessage({ id: 'center.x_model' })}
            </div>
            <div
              style={{ fontSize: 16, color: '#666666', fontWeight: 'lighter', lineHeight: '26px' }}
            >
              {intl.formatMessage({ id: 'center.x_model_word' })}
            </div>
            <Divider />
          </div>
        </Flex>
      </div>
      {/* 为什么需要 */}
      <div className="credit_need" id="need">
        <div className="common">
          <Flex justify="space-between">
            <div style={{ marginLeft: 102 }}>
              <div style={{ fontSize: 30, fontWeight: 'bold', color: '#333', marginBottom: 44 }}>
                {intl.formatMessage({ id: 'center.why' })}
              </div>
              {list.map((item, index) => {
                const { title, word } = item;
                return (
                  <div key={title}>
                    <Flex style={{ marginBottom: 35 }}>
                      <div
                        style={{
                          marginRight: 30,
                          background: 'rgba(130, 166, 199, 0.3)',
                          borderRadius: '50%',
                          textAlign: 'center',
                          width: 40,
                          height: 40,
                          lineHeight: '40px',
                          fontSize: '20px',
                          color: '#011536',
                          fontWeight: 600,
                        }}
                      >
                        {index + 1}
                      </div>
                      <div style={{ flex: 1 }}>
                        <div
                          style={{
                            marginBottom: 10,
                            fontSize: 18,
                            color: '#333',
                            fontWeight: 'bold',
                          }}
                        >
                          {intl.formatMessage({ id: title })}
                        </div>
                        <div style={{ color: '#666', lineHeight: '20px' }}>
                          {intl.formatMessage({ id: word })}
                        </div>
                      </div>
                    </Flex>
                  </div>
                );
              })}
              <Button
                onClick={() => {
                  jumpUrl('/product');
                }}
                style={{ width: 144, height: 46, marginTop: 10 }}
                type="primary"
              >
                {intl.formatMessage({ id: 'center.check' })}
              </Button>
            </div>
            <div style={{ marginLeft: 95 }}>
              <img src={people} width={443} />
            </div>
          </Flex>
        </div>
      </div>

      <div className="credit_check common" id="check">
        <div
          style={{
            textAlign: 'center',
            marginBottom: 60,
            fontSize: 30,
            fontWeight: 'bold',
            color: '#333',
          }}
        >
          {intl.formatMessage({ id: 'center.credit_check' })}
        </div>
        <Card title="">
          {checkList.map((item, inddex) => {
            {
              const { width, title, word } = item;
              return (
                <Card.Grid style={{ width, padding: '20px' }} hoverable={false}>
                  <div>
                    <img width={50} src={require(`@/assets/evaluation-icon${inddex + 1}.svg`)} />
                  </div>
                  <div style={{ margin: '20px 0 ', fontSize: 20, color: '#333' }}>
                    {intl.formatMessage({ id: title })}
                  </div>
                  <div style={{ color: '#666', fontSize: 16, fontWeight: 'lighter' }}>
                    {intl.formatMessage({ id: word })}
                  </div>
                </Card.Grid>
              );
            }
          })}
        </Card>
      </div>
      <div className="credit_report" id="report">
        <div className="common">
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 30, fontWeight: 'bold', marginBottom: 10 }}>
              {intl.formatMessage({ id: 'center.credit_report_tilte' })}
            </div>
            <div style={{ marginBottom: 40, fontSize: 18, fontWeight: 500, color: '#333' }}>
              {intl.formatMessage({ id: 'center.credit_way' })}
            </div>
          </div>
          <Flex gap={20}>
            {reportList.map((item, index) => {
              const { word, title } = item;
              return (
                <div
                  key={word}
                  style={{
                    background: '#011C64',
                    flex: 1,
                    padding: 35,
                    borderRadius: 6,
                    position: 'relative',
                  }}
                >
                  <div className={`credit_report_bg${index + 1}`} />
                  <div style={{ fontSize: 20, fontWeight: 600, color: '#fff', marginBottom: 20 }}>
                    {intl.formatMessage({ id: title })}
                  </div>
                  <div
                    style={{
                      lineHeight: '26px',
                      fontSize: 17,
                      fontWeight: 400,
                      color: 'rgba(255, 255, 255, 0.5)',
                    }}
                  >
                    {intl.formatMessage({ id: word })}
                  </div>
                </div>
              );
            })}
          </Flex>
        </div>
      </div>
    </div>
  );
};

export default Credit;
